<template>
  <div class="menu-content">
    <el-menu
        :default-active="state.activeMenu"
        text-color="#B1B6C2"
        active-text-color="#FFFFFF"
        background-color="rgba(36, 38, 47, 0)"
        mode="horizontal"
        @select="jump"
    >
      <subMenu :menuData="state.menuData"></subMenu>
    </el-menu>
  </div>
</template>

<script setup lang='ts'>
import {computed, reactive} from "vue";
import {useStore} from 'vuex'
import {useRouter, useRoute, RouteLocationRaw} from "vue-router"
import subMenu from './subMenu.vue'

const router = useRouter();
const route = useRoute();
const {getters} = useStore();
const state = reactive({
  isCollapse: true,
  menuData: getters['userMessage/getMenuList'],
  activeMenu: computed(()=>{
    return route.name
  })
})

const jump = (url: RouteLocationRaw)=>{
  if (url === '')  return;
  router.push(url);
}
</script>
<style scoped lang="scss">
.menu-content{
  position: absolute;
  left: pxTvw(463-24);
  height: pxTvh(46);
  top: pxTvh(1);
  flex: 1;
  :deep(.el-menu) {
    height: 100%;
    border-bottom: none;
    .el-menu-item {
      margin: 0 pxTvw(24);
      padding: 0 pxTvw(3);
      @include computed_font(14);
      line-height: pxTvh(46);
      em{
        margin-right: pxTvw(10);
        @include computed_font(18);
      }
    }
    .el-menu-item.is-active{
      border-bottom: 2px solid #3679FF;
    }
    .el-menu-item.is-disabled{
      opacity: .5;
    }
    .el-menu-item:hover{
      color: #FFFFFF;
    }
    .el-sub-menu{
      margin: 0 pxTvw(24);
      .el-sub-menu__title{
        padding: 0 pxTvw(3);
        @include computed_font(14);
        line-height: pxTvh(46);
        border-bottom: 2px solid transparent;
        em{
          margin-right: pxTvw(10);
          @include computed_font(18);
        }
      }
    }
    .el-sub-menu.is-active{
      .el-sub-menu__title{
        border-bottom: 2px solid #FFFFFF;
      }
      
    }
  }
}
</style>
<style lang="scss">
//下拉样式
.el-menu--horizontal {
  --el-menu-border-color: rgba(0,0,0,0.1);
  .el-menu {
    --el-menu-bg-color: rgb(22,49,86) !important;
    --el-menu-hover-text-color: #6AA1FF !important;
    .el-menu-item{
      padding: 0 pxTvw(24);
      height: pxTvh(60);
    }
    .el-menu-item.is-active::after {
      content: '';
      position: absolute;
      left: pxTvw(24);
      bottom: 2px;
      right: 0;
      height: 2px;
      width: calc(100% - #{pxTvw(48)});
      background-color: var(--el-menu-active-color);
    }
  }
  .el-menu--popup{
    padding: 0;
  }
}
</style>
